<%--
  Created by IntelliJ IDEA.
  User: Kristina
  Date: 2020/7/25
  Time: 17:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>下单成功</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=" Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <%--jq--%>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.5.1.js" type="text/javascript"></script>
    <%--    laiui 框架--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <%--    bootstrap 框架--%>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type='text/css'>
    <%--    font-awesome 图标库--%>
    <link href="${pageContext.request.contextPath}/front/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <%--    高德地图API--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=5702b4a78aee7e6d4704e647d45a5e5d&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation"></script>
    <%--    项目 css--%>
    <link href="${pageContext.request.contextPath}/front/css/style.css" rel="stylesheet" type="text/css"/>
    <script src="${pageContext.request.contextPath}/front/js/publicFunctions.js" type="text/javascript"></script>
    <%--    <script src="${pageContext.request.contextPath}/static/clipboard.js-master/dist/clipboard.js" type="text/javascript"></script>--%>
</head>
<body class="layui-bg-gray">
<!-- //header -->
<header id="header" style="z-index: 51" class="pb-2 layui-bg-cyan">
    <div class="mx-auto d-flex pt-3 w-75">
        <!-- top header -->
        <%--        <div class="d-flex pt-3">--%>
        <div id="logo" class="align-self-center">
            <h1>
                <a href="${pageContext.request.contextPath}/index.jsp" style="text-shadow: 2px 2px black">码上物流</a>
            </h1>
        </div>
        <div class="align-self-center ml-5">
            <nav class="nav pt-2">
                <ul class="mt-2">
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/about.jsp">About Us</a>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/services.html">Services</a>
                    </li>
                    <li class="mr-3 mr-2 p-0">
                        <!-- First Tier Drop Down -->
                        <label for="drop-2" class="toggle">Dropdown<span class="fa fa-angle-down"
                                                                         aria-hidden="true"></span>
                        </label>
                        <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                        <input type="checkbox" id="drop-2"/>
                        <ul class="inner-dropdown rounded">
                            <li>
                                <a href="${pageContext.request.contextPath}/front/gallery.html">Our Gallery</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/front/error.html">404 Error Page</a>
                            </li>
                            <li>
                                <a href="#">Add Link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/contact.html">Contact</a>
                    </li>
                    <li class="">
                        <a href="#subscribe">关于我们</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div id="LoginDiv" class="ml-auto top-grid d-flex">
            <div class="d-flex w-100 p-2">
                <a href="javascript:void(0)" class=" align-self-end ml-auto text-white" style="color: white"
                   onclick="doFastLogin()">未登录</a>
                <a href="javascript:void(0)" class="align-self-end" onclick="doFastLogin()">
                    <span class="fa ml-3 fa-user-circle-o text-light"></span>
                </a>
            </div>
        </div>
        <div class="d-flex ml-3 pb-2">
            <a href="javascript:void(0)" class="city text-white align-self-end"></a>
            <a href="javascript:void(0)" onclick="detectLocation()"
               class="fa fa-2x fa-location-arrow ml-3 location-icon align-self-end"></a>
        </div>
        <!-- top header -->

    </div>
</header>
<!-- //header -->
<div class="contact m-4">
    <div class="container shadow p-3">
        <div class="d-flex">
            <span class="fa fa-4x user-select-none  fa-check-circle-o text-success user-select-all"></span>
            <h3 class="text-secondary ml-3 align-self-center">生成订单成功！</h3>
        </div>
        <div class="ml-3 p-2 d-flex">
            <h3 class="text-secondary">请妥善保管您的订单号:</h3>
        </div>
        <div class="container d-flex">
            <div class="mx-auto d-flex p-3">
                <h1 id="orderId" class="font-weight-bold text-secondary"></h1>
                <a href="javascript:void(0)" class="fa ml-3 fa-2x fa-copy align-self-center"></a>
            </div>
        </div>
        <div class="ml-3 p-2 mt-2 d-flex">
            <h5 class="text-secondary ml-auto">请耐心等待快递员上门揽件或自行到<a href="javascript:void(0)" class="font-weight-bold">附近的仓库</a>邮寄包裹
            </h5>
        </div>
        <div class="container p-2 d-flex options font-weight-bold">
            <a href="${pageContext.request.contextPath}/index.jsp" class="ml-auto"> 回到首页 </a>&emsp;
            <a href="${pageContext.request.contextPath}/front/order.jsp"> 继续寄快递 </a>&emsp;
            <a href="javascript:void(0)"> 查看我的快递 </a>
        </div>
    </div>
</div>
<!-- //contact -->
<!-- footer-top -->
<section class="footer-top py-5">
    <div class="container">
        <div class="row footer-top-grid">
            <div class="col-sm-6">
                <h3>Contact Us</h3>
                <p>Call us, we are 24/7 Helpline</p>
            </div>
            <div class="col-sm-6 text-sm-right mt-sm-0 mt-3">
                <h3><span class="fa fa-phone" aria-hidden="true"></span> +11 2345 6789</h3>
            </div>
        </div>
    </div>
</section>
<!-- //footer-top -->
<!--footer -->
<div class="footer footer_w3layouts_section_1its py-5" id="subscribe">
    <div class="container pt-sm-4">
        <div class="row footer-grid">
            <div class="col-md-5 footer-grid_section_1its_w3">
                <div class="footer-title">
                    <h3>Who we are</h3>
                </div>
                <div class="footer-text">
                    <p>Curabitur non nulla sit amet nislinit tempus ipsum convallis quis ac lectus. lac inia eget
                        consectetur sed, convallis at tellus. Nulla porttitor accumsana tincidunt. Vestibulum ante ipsum
                        primis tempus.</p>
                    <ul class="social_section_1info">
                        <li>
                            <a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 col-sm-5 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Useful Links</h3>
                </div>
                <ul class="links">
                    <li>
                        <a href="about.html">About Our Company</a>
                    </li>
                    <li>
                        <a href="services.html">Logistics Services</a>
                    </li>
                    <li>
                        <a href="#">Terms & Conditions</a>
                    </li>
                    <li>
                        <a href="#">Privicy Policy</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-7 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Subscribe</h3>
                </div>
                <div class="footer-text">
                    <p>By subscribing to our mailing list you will get latest news and updates from us.</p>
                    <form action="#" method="post">
                        <input type="email" name="Email" placeholder="Enter your email..." required="">
                        <button class="btn1"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- move top -->
        <div class="move-to-top text-center">
            <a href="#home" class="move-top"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
        </div>
        <!-- //move top -->
        <div class="copyright">
            <p>© 2019 Logistic. All Rights Reserved | Design by
                <a href="http://w3layouts.com/">W3layouts</a>
            </p>
        </div>
    </div>
</div>
<input type="hidden" id="orderIdText" value="23">
<!-- //footer -->
<script src="${pageContext.request.contextPath}/front/js/fastLogin.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/ipLocation.js" type="text/javascript"></script>
<script>
    const webServKey = "2fddcdbc01f779d6382b8439a7279f3e";
    let content = $("#orderId").text();
    let clipboard
</script>
<script>
    $(function () {
        // 加载layui模块
        layui.use(['layer'], function () {
            layer = layui.layer;
        });
        // 根据header调整元素
        detectLocation();
        // 检测登陆
        detectLogin();
        getOrderId();
    })


    function getOrderId() {
        let orderId = getQueryString('orderId');
        if (orderId === null) {

        } else {
            $('#orderId').text(orderId);
        }
    }

    // IP定位
    function selfLocation() {
        geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
                // console.log(result)
                fillSendAddress(result.addressComponent.province, result.addressComponent.city, result.addressComponent.district, result.position.lng, result.position.lat, result.addressComponent.adcode, result.addressComponent.citycode);
                //锁定查找城市区域
                sendAutocomplete.setCity(result.addressComponent.adcode);
                // lockCity(result.addressComponent.citycode)
            } else {
                layer.msg("定位服务器开小差了！")
            }
        });
    }

    //检测登录
    function detectLogin() {
        if ('${sessionScope.User.userId}' !== '') {
            $('#loginDiv').empty();
            var content = '' +
                '<nav class="nav w-100">' +
                '<ul class="w-100 nav justify-content-end">' +
                '<li class="rounded-top pl-2 pr-2 pb-2">' +
                '<a href="javascript:void(0)">' +
                ' <span class="mr-2">名sdfsdfd </span>' +
                '<img src="front/images/manager.jpg" class="layui-circle mb-2" height="45" width="45">' +
                '</a>' +
                '<ul class="inner-dropdown rounded w-50 pl-2 pr-2 ml-n4" style="z-index: 1;">' +
                '<li>' +
                '<a href="${pageContext.request.contextPath}/front/gallery.html">个人中心</a>' +
                '</li>' +
                '<li>' +
                '<a href="${pageContext.request.contextPath}/front/error.html">退出</a>' +
                '</li>' +
                '</ul>' +
                '</li>' +
                '</ul>' +
                '</nav>';
            $('#loginDiv').append(content);
        }
    }
</script>
</body>
</html>
